<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      title="黑马头条"
      left-arrow
      @click-left="onClickLeft"
      style="background-color: #3296fa; color: #fff"
    />
    <!-- 主体 -->
    <div class="zt">
      <h4>{{ article.title }}</h4>
      <van-cell :title="article.aut_name" :label="time">
        <van-button type="info" round v-if="!isguanzhu" @click="gz"
          >+ 关注</van-button
        >
        <van-button round v-else @click="ngz">已关注</van-button>
        <template #icon>
          <van-image
            width="32px"
            height="32px"
            round
            style="margin-right: "
            :src="article.aut_photo"
          ></van-image>
        </template>
      </van-cell>
      <!-- 内容 -->
      <div
        class="article-content markdown-body"
        v-html="article.content"
        @click="imgchange($event)"
      ></div>
      <!-- 评论列表 -->

      <van-list
        :finished="finished"
        finished-text="没有更多了"
        @load="getcomment"
        v-model="loading"
      >
        <!-- 评论组件 -->
        <comment
          v-for="(item, index) in plList"
          :key="index"
          :arr="plList"
          :item="item"
          @ss="huifu(item)"
        ></comment>
      </van-list>
    </div>

    <!-- 底部导航 -->
    <van-goods-action>
      <van-goods-action-button
        type="default"
        round
        text="写评论"
        @click="xiepL"
      />
      <van-goods-action-icon icon="comment-o" :badge="article.comm_count" />
      <van-goods-action-icon
        :icon="article.is_collected ? 'star' : 'star-o'"
        :color="article.is_collected ? '#ff5000' : ''"
        @click="shoucang"
      />
      <van-goods-action-icon icon="good-job-o" />
      <van-goods-action-icon icon="share-o" />
    </van-goods-action>
    <!-- 评论弹层 -->
    <van-popup v-model="isShowPl" position="bottom" :style="{ height: '20%' }">
      <van-field
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请输入留言"
        show-word-limit
      />
      <van-button
        :disabled="message.length === 0 ? true : false"
        type="info"
        @click="wzFabu"
        >发布</van-button
      >
    </van-popup>
    <!-- 回复评论弹层 -->
    <van-popup v-model="isShowLl" position="bottom" :style="{ height: '100%' }">
      <ping-lun @close="isShowLl = false" :item="itemm" :artId="id"></ping-lun>
    </van-popup>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'
import dayjs from '@/utils/dayjs'
import './github-markdown.css'
import {
  getDetailAPI,
  getCollection,
  NotCollection,
  commentsArticle,
  getCommentAPI,
  guanzhuAPI,
  notguanzhuAPI
} from '@/api'
import PingLun from './components/PingLun.vue'
import Comment from './components/comment.vue'
export default {
  components: { PingLun, Comment },
  data() {
    return {
      article: {},
      id: '',
      isShowPl: false,
      message: '',
      plList: [],
      lastId: null,
      finished: false,
      loading: false,
      isShowLl: false,
      itemm: null,
      isguanzhu: '',
      zzid: '',
      src: '',
      srcList: []
    }
  },
  created() {
    this.$toast.loading({
      message: '加载中。。。',
      forbidClick: true
    })
    this.id = this.$route.query.id
    this.getArticle(this.id)
  },
  methods: {
    imgchange(e) {
      if (e.target.nodeName === 'IMG') {
        ImagePreview({
          images: this.srcList,
          loop: false
        })
      }
    },
    async getArticle(art_id) {
      const { data } = await getDetailAPI(art_id)
      this.article = data.data
      console.log(this.article)
      this.isguanzhu = this.article.is_followed
      this.zzid = this.article.aut_id
      this.src = this.article.aut_photo
      this.article.content.replace(
        /<img [^>]*src=['"]([^'"]+)[^>]*>/g,
        (match, capture) => {
          this.srcList.push(capture)
        }
      )
      //所有的图片地址
      this.srcList.push(this.src)
      console.log(this.srcList)
    },
    async getcomment() {
      const { data } = await getCommentAPI({
        type: 'a',
        source: this.id,
        offset: this.lastId
      })
      this.lastId = data.data.last_id
      if (this.lastId == null) {
        this.finished = true
        return
      }
      this.plList.push(...data.data.results)
      if (data.data.total_count === this.plList.length) {
        this.finished = true
        this.loading = true
      } else {
        this.loading = false
      }
      console.log(data)
    },
    onClickLeft() {
      this.$router.back()
    },
    async shoucang() {
      if (this.article.is_collected) {
        await NotCollection(this.id)
        this.article.is_collected = false
      } else {
        await getCollection(this.id)
        this.article.is_collected = true
      }
    },
    async wzFabu() {
      const { data } = await commentsArticle({
        target: this.id,
        content: this.message
      })
      // console.log(data)
      this.isShowPl = false
      this.plList.unshift(data.data.new_obj)
      // this.getcomment()
    },
    xiepL() {
      this.isShowPl = true
    },
    huifu(item) {
      this.isShowLl = true
      this.itemm = item
    },
    async gz() {
      await guanzhuAPI(this.zzid)
      this.isguanzhu = true
    },
    async ngz() {
      await notguanzhuAPI(this.zzid)
      this.isguanzhu = false
    }
  },
  computed: {
    time() {
      return dayjs(this.article.pubdate).fromNow()
    }
  }
}
</script>

<style scoped lang="less">
.zt {
  height: calc(100vh - 46px - 50px - 50px) !important;
  overflow: auto;
  padding-bottom: 100px;
}
.article-content {
  padding: 30px;
  padding-bottom: 180px !important;
}
:deep(.van-goods-action-button) {
  border: #ccc 1px solid;
  color: #ccc;
}
:deep(.van-nav-bar__title) {
  color: white;
}
:deep(.van-icon-arrow-left) {
  color: #fff;
}
</style>